<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>抽奖</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    @font-face {
      font-family: 'FZZJ';
      src: url('./font/FZZJ-LongYTJW.TTF');
    }
    #app {
      position: relative;
      height: 100%;
      width: 100%;
      background-color: #000;
      background-image: url('./images/bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
    }
    #result {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      color: #E6C164;
      font-size: 180px;
      font-family: 'FZZJ';
      text-align: center;
      letter-spacing: 30px;
      user-select: none;
    }
    .dialog-link {
      opacity: 0;
    }
    .dialog-link:hover {
      opacity: .1;
      animation: 1s;
    }
    .dialog-btn {
      margin-top: 20px;
      text-align: center;
    }
    .check-num {
      width: 50px;
      margin-top: 10px;
    }
    .el-dialog__body {
      padding: 10px 20px 30px 20px!important;
    }
  </style>
  <link rel="stylesheet" href="./element/index.css">
</head>
<body>
  <script src="./js/vue.js"></script>
  <script src="./element/index.js"></script>
  <div id="app">
    <div id="result" ref="result">{{num}}</div>
    <el-button class="dialog-link" @click="visible = true">删除无效数字</el-button>
    <!-- 删除重复数字dialog -->
    <el-dialog title="删除无效数字" :visible.sync="visible" @close="clearData">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
        v-if="nums.length > 0">全选</el-checkbox>
      <p v-else>暂无中将号码，看好你的号码牌，不要乱点！！</p>
      <el-checkbox-group v-model="selectNums" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="num in nums" :label="num.num" :key="num.num" class="check-num">{{num.num}}</el-checkbox>
      </el-checkbox-group>
      <div class="dialog-btn">
        <el-button slot="reference" :disabled="nums.length <= 0" style="margin-right: 20px;"
          @click="resultVisible = true">查看抽奖结果</el-button>
        <el-popover placement="top" width="160" v-model="btnVisible">
          <p>删除后将无法恢复，确认删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="btnVisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="deleteItems">确定</el-button>
          </div>
          <el-button slot="reference" :disabled="selectNums.length <= 0">删除勾选数字</el-button>
        </el-popover>
      </div>
    </el-dialog>
    <!-- 展示中奖结果数字dialog -->
    <el-dialog title="抽奖结果" :visible.sync="resultVisible">
      <el-table :data="nums" size="small" height="400">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column property="num" label="中奖号码" align="center"></el-table-column>
        <el-table-column property="time" label="中奖时间" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
  <script src="./js/index.js"></script>
</body>
</html>